<!DOCTYPE html>

<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        * {

            margin: 0;
        }

        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #tabtop {
            line-height: 31px;
            background: url("/admin/templates/images/map_top_bg.png") repeat;
            font-size: 12px;
            color: #343434;
        }

        #tabtop span {
            float: left;
            line-height: 31px;
            display: block;
        }

        #tabtop span.dob {
            padding-left: 7px;
        }

        #tabtop span.dob a {
            background: url("/admin/templates/images/yuncheng_a.png") no-repeat left center;
        }

        #tabtop span.dob a.ok {
            color: #3a3;
        }

        #tabtop span.dob a.on {
            color: #ef4f4f;
        }

        #tabtop span a {
            padding: 0 16px 0 8px;
            color: #343434;
            text-decoration: none;
        }

        #tabtop span.bd a {
            border-right: 1px solid #ccc;
            padding: 0 12px;
        }

        .position {
            vertical-align: text-bottom;
            margin-right: 5px;
            width: 9px;
        }

        .warring {
            color: #f00;
            padding: 0 12px;
            font-weight: bold;
        }

        .warring i {
            font-style: normal;
            float: left;
        }

        #tabtop span.warring a {
            color: #f00;
            display: block;
            float: left;
        }

        #allmap {
            float: left;

        }

        #right {
            float: right;
            background: #EFEFEF;
            height: 100%;
        }

        .dataTable {

            width: 100%;
            margin: 0 0 0 0;

        }

        .dataTable td {
            text-align: left;
        }

        .dataTable .firstCell {
            padding-left: 25px;
        }

        .tdare {
            padding: 5px;
            overflow: auto;
        }

        .tdare a {
            padding: 5px;
            color: #000;
            text-decoration: none;
        }

        .tdare td {

        }

        .tdare th a, .tdare td a {
            color: #3a7cae;
        }

        .tdare th a:hover, .tdare td a:hover {
            color: #3a7cae;
        }

        .tatr2 a {
            text-decoration: none;
        }

        .tatr2 td {
            border-bottom: 1px solid #ccc;
        }

        .anchorBL {
            display: none;
        }

        .formbtn {
            background: #e2e3e5;
            border: 1px solid #ccc;
            font-weight: bold;
            height: 28px;
            width: 78px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            color: #666;
            cursor: pointer;
        }

        .tdare a {
            border-bottom: 1px solid #999;
            display: block;
        }

        #bottom ul li {
            float: left;
            padding-left: 10px;
            list-style-type: none;
            display: inline;
        }

        .img_nav {
            height: 75px;
        }

        .bottom {
            height: 100px;
        }

        .text_nav {
            text-align: center;
        }

        .item {
            width: 100px;
            text-align: center;
            margin-right: 5px;
        }

        .li_border {
            border: 1px solid red;
            border-style: solid;
        }
    </style>


    <script type="text/javascript">
        //<!CDATA[
        var SITE_URL = "{$site_url}";
        var REAL_SITE_URL = "{$real_site_url}";
        var REAL_BACKEND_URL = "{$real_backend_url}";
        //]]>
    </script>

    <script type="text/javascript" src="{lib file=jquery.js}" charset="utf-8"></script>
    <title>监控 </title>
</head>

<body class="page">


<iframe class="top" id="container" frameborder="0" scrolling="no">

</iframe>
<!--{if $monitor.ShowNav=="1"}-->
<div id="bottom" class="bottom">
    <ul>
        <!--{foreach from=$monitor.details item=w}-->
        <!--{if $w.Interval>0}-->
        <li name="item_{$w.Id|escape}" class="item"><a herf="javascript:void(0)"
                                                       onclick="GotoUrl('{$w.Id|escape}','{$w.Url|escape}')">
            <div><img class="img_nav" src="{$site_url}{$w.Img|escape}"></div>
            <div class="text_nav">{$w.Name|escape}</div>
        </a>
        </li>
        <!--{/if}-->
        <!--{foreachelse}-->
        <!--{/foreach}-->
    </ul>
</div>
<!--{/if}-->

<script type="text/javascript">
    var monitor = {$monitorJson};
    function GotoUrl(id, url) {
        if (!url.startsWith("http"))
            url = SITE_URL + url;
        $("#container").attr("src", url);
        <!--{if $monitor.ShowNav=="1"}-->

        $("li[name^='item_']").removeClass("li_border");
        $("li[name='item_" + id + "']").addClass("li_border");
        <!--{/if}-->
    }
    function winresize() {
        <!--{if $monitor.ShowNav=="1"}-->

        $("#bottom").width($(window).width() - 10);

        $("#container").height($(window).height() - $("#bottom").height() - 10);
        $("#container").width($('#bottom').width());
        <!--{else} -->
        $("#container").height($(window).height() - 10);
        $("#container").width($(window).width() - 10);
        <!--{/if}-->

    }

    var monitorArray = [];
    var idx = 0;
    $(function () {
        $.each(monitor.details, function (idx, obj) {
            if (obj.Interval > 0 && obj.Url.length > 0)
                monitorArray.push(obj);
        });
        if (monitorArray.length > 1) {
            var info = monitorArray[idx];
            NextUrl(info);
        } else if (monitorArray.length > 0) {
            var info = monitorArray[idx];
            GotoUrl(info.Id, info.Url);
        } else {
            alert("未设置监控页面,请联系管理员");
            close();
        }
        try {
            winresize();
            $(window).resize(function () {
                winresize();
            });
        }
        catch (e) {
            console.log(e);
        }
    });
    function NextUrl(info) {
        GotoUrl(info.Id, info.Url);
        if (idx >= monitorArray.length - 1)
            idx = 0;
        else
            idx++;
        var nextInfo = monitorArray[idx];
        setTimeout(_nextUrl(nextInfo), info.Interval * 1000);
    }
    function _nextUrl(info) {
        return function () {
            NextUrl(info);
        }

    }

</script>
</body>
</html>


